<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/header.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>Document</title>
  <style>
    .zdy-top {
      list-style: none;
      height: 8vh;
      background-color: rgb(241, 216, 216);
    }
    .zdy-top img {
      height: 4vh;
    }
    .zdy-top input {
      list-style: none;
      width: 60vh;
      height: 5vh;
    }
    .xz-kzf >li {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #fff;
    }
    .xz-kzf >li.active {background-color: #0aa1ed;}
  </style>
</head>

<body>
  <div class="container">
    <div class=" navbar fixed-top zdy-top d-flex ">
      <!-- logo区 -->
       <a href="#" class="navbar-brand">
        <img src="./product/images/footer-logo.png" alt="" class="ml-3 mr-3">
       </a>
       <!-- 搜索区 -->
          <div class="zdy-search">
            <input type="text" class="" placeholder="搜索">
            <img src="./product/images/products/icon_04yk6rrjj3gs/search.png" alt="" class="mb-0 ml-0">
        </div>
        <!-- 购物车区 -->
        <div class="zdy-car">
          <img src="./product/images/products/icon_04yk6rrjj3gs/gouwuche.png" alt="" class="">
          <input type="text" class="">
        </div>   
    </div>
  </div>
      <!-- 大背景轮播图 -->
        <!-- 最外层 -->
        <div class="carousel slide" id="banner" data-ride="carousel">
          <!-- 1.图片部分展示图 -->
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="./product/images/slider/slider-img1.jpg" alt="" class="d-block w-100">
            </div>
            <div class="carousel-item active">
              <img src="./product/images/slider/slider-img3.jpg" alt="" class="d-block w-100">
            </div>
            <div class="carousel-item active">
              <img src="./product/images/slider/slider-img2.jpg" alt="" class="d-block w-100">
            </div>
          </div>
          <!-- 2.左右切换按钮 -->
          <a href="#banner" class="carousel-control-prev bg-danger" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a href="#banner" class="carousel-control-next bg-danger" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
          <!-- 指示控制符 -->
          <ul class="carousel-indicators xz-kzf">
            <li class="active" data-slide-to="0" data-target="#banner"></li>
            <li data-slide-to="1" data-target="#banner"></li>
            <li data-slide-to="2" data-target="#banner"></li>
          </ul>
        </div>
</body>
</html>